<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        html{
            font-size: 20px;
        }
        #box{
            width: 10rem;
            height: 10rem;
            margin: 2rem auto;
            background: red;
        }

    </style>
    <script>
        (function (win,doc) {
            function change() {
                doc.documentElement.style.fontSize=20*doc.documentElement.clientWidth/320+'px';
            }
            change();

            win.addEventListener('resize',change,false);
        })(window,document);

        document.addEventListener('DOMContentLoaded',function () {
            var oBox=document.getElementById('box');
            var s=1;

            function getS(ev) {
                var x1=ev.targetTouches[0].pageX;
                var y1=ev.targetTouches[0].pageY;

                var x2=ev.targetTouches[1].pageX;
                var y2=ev.targetTouches[1].pageY;

                var a=x1-x2;
                var b=y1-y2;

                return Math.sqrt(a*a+b*b);
            }

            document.addEventListener('touchstart',function (ev) {
                    //获取按下时的两点间长度
                    var downS=getS(ev);
                    //存以前的比例
                    var oldS=s;

                    function move(ev) {
                        s=oldS*getS(ev)/downS;
                        oBox.style.WebkitTransform='scale('+s+')';
                    }

                    oBox.addEventListener('touchmove',move,false);

                    ev.preventDefault();
            },false)


        },false)
    </script>
</head>
<body>
    <div id="box">

    </div>
</body>
</html>
































